<template>
  <div class="swiper-item" :style="{'background':computerInfo.backgroundVal}">
    <div class="left">
      <div class="gif-box">
        <img :src="gifLink" alt="">
        <div class="gif-mask" :style="{'color':computerInfo.colorVal}">超A造型<h4>&gt;&gt;&gt;&gt;&gt;</h4></div>
      </div>
      <Item type='type01' :goodsInfo="goods01" @childEvent='goForGoodsDetail'/>
    </div>
    <div class="center"><img :src="computerInfo.imgLink" alt=""></div>
    <div class="right">
      <Item type='type02' :goodsInfo="goods02" @childEvent='goForGoodsDetail'/>
      <Item type='type01' :goodsInfo="goods03" @childEvent='goForGoodsDetail'/>
    </div>
  </div>
</template>

<script>
  import Item from './item.vue'
  export default {
    props:['data','index'],
    components:{Item},
    data(){
      return{
        gifLink:require('../../../assets/img/yxWeeks/week13.gif'),
        goods01:{},
        goods02:{},
        goods03:{}
      }
    },
    computed:{
      computerInfo(){
        let backgroundVal='',colorVal='',imgLink='';
        switch(this.index){
          case 1:
            backgroundVal='#FF8249';colorVal='#FF8249';
            imgLink=require('../../../assets/img/yxWeeks/week13.jpg');
            break;
          case 2:
            backgroundVal='#C9342E';colorVal='#FE4A01';
            imgLink=require('../../../assets/img/yxWeeks/week14.jpg');
            break;
          case 3:
            backgroundVal='#2E2F92';colorVal='#1FAFF5';
            imgLink=require('../../../assets/img/yxWeeks/week15.jpg');
            break;
          default:
            backgroundVal='#306C44';colorVal='#22AC38';
            imgLink=require('../../../assets/img/yxWeeks/week12.jpg');
            break;
        };
        return {backgroundVal,colorVal,imgLink};
      }
    },
    created(){
      this.goods01=this.data[0];
      this.goods02=this.data[1];
      this.goods03=this.data[2];
    },
    methods:{
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      }
    }
  }
</script>

<style lang="less" scoped>
.swiper-item{
  display: flex;
  height: 6.67rem;
  padding: 0.2rem 0.15rem 0;
  background: #2E2F92;
  box-sizing: border-box;
  .left{
    width: 2.15rem;
    margin-right: 0.15rem;
    .gif-box{
      position: relative;
      font-size: 0.32rem;
      font-family: '微软雅黑';
      .gif-mask{
        padding-left: 0.45rem;
        padding-top: 0.3rem;
        height: 1rem;
        font-weight: 700;
        position: absolute;
        bottom: 0;left: 0;
      }
    }
  }
  .center{
    width: 2.65rem;
    margin-right: 0.15rem;
  }
  .right{
    width: 2.15rem;
  }
}
</style>